<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            background: #888686;
            width: 300px;
            height: 200px;
            border: 1px solid #2c2c2c;
            line-height: 200px;
            text-align: center
        }
    </style>



</head>

<body>
    <div id="div1">
        拖到这里上传
    </div>
</body>
<script>
    /**
     *ondragenter   进去 
     *ondragleave   出去
     *ondragover    进去
     *ondrop        松手 
        reader.readAsText(oFile)   //读取文件
        reader.readAsDataURL(oFile)   //读取base64图片
        reader.readAsArrayBuffer(oFile)   //原始二进制数据        可以编辑     不实用
        reader.readAsBinaryString(oFile)   //二进制的文本形式数据 上传
     */
    let oDiv = document.getElementById('div1');
    oDiv.addEventListener('dragenter',function(){
        oDiv.innerHTML='请松手'
    },false)
    oDiv.addEventListener('dragleave',function(){
        oDiv.innerHTML='拖到这里上传'
    },false)
    oDiv.addEventListener('dragover',function(ev){
        ev.preventDefault()
    })
    oDiv.addEventListener('drop',function(ev){
        ev.preventDefault()
        //接收文件对象
        let oFile=ev.dataTransfer.files[0]

        console.log(oFile)   //可以获取文件名  上传的时间  文件类型

        //读取文件
        let reader = new FileReader();
        reader.onload=function (){
            console.log(this.result)
        }
        reader.onerror=function (){
            alert('读取失败')
        }
        // 如果读取的是文本文件
        console.log(reader)
        reader.readAsText(oFile)
    })
</script>

</html>